<template>
	<common-page title="重置密码">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="填写新密码"/>
			<el-step title="完成重置"/>
		</el-steps>
		<el-form v-if="stepActive==0" ref="form" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="登录账号" prop="username">
				<el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
				<div class="el-form-item-msg">请输入注册时填写的登录账号</div>
			</el-form-item>
			<el-form-item label="邮箱账号" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱账号"></el-input>
			</el-form-item>
			<el-form-item label="邮箱验证码" prop="verificationCode">
				<div class="yzm">
					<el-input v-model="form.verificationCode" placeholder="请输入6位邮箱验证码"></el-input>
					<el-button @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{ time }})</span>
					</el-button>
				</div>
			</el-form-item>
			<el-form-item label="新密码" prop="newPassword">
				<el-input v-model="form.newPassword" show-password placeholder="请输入新密码"></el-input>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认新密码" prop="newPasswordTwo">
				<el-input v-model="form.newPasswordTwo" show-password placeholder="请再一次输入新密码"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="save">提交</el-button>
			</el-form-item>
		</el-form>
		<el-result v-if="stepActive==1" icon="success" title="密码重置成功"
				   sub-title="请牢记自己的新密码,返回登录后使用新密码登录">
			<template #extra>
				<el-button type="primary" @click="backLogin">返回登录</el-button>
			</template>
		</el-result>
	</common-page>
</template>

<script>
import commonPage from './components/commonPage'

export default {
	components: {
		commonPage
	},
	data() {
		return {
			stepActive: 0,
			form: {
				username: "",
				email: "",
				verificationCode: "",
				newPassword: "",
				newPasswordTwo: ""
			},
			rules: {
				username: [
					{required: true, message: '请输入登录账号'}
				],
				email: [
					{required: true, message: '请输入邮箱账号'}
				],
				verificationCode: [
					{required: true, message: '请输入短信验证码'}
				],
				newPassword: [
					{required: true, message: '请输入新的密码'}
				],
				newPasswordTwo: [
					{required: true, message: '请再次输入新的密码'},
					{
						validator: (rule, value, callback) => {
							if (value !== this.form.newPassword) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback();
							}
						}
					}
				],
			},
			disabled: false,
			time: 0
		}
	},
	mounted() {
		let expirationTime = this.$TOOL.cookie.get("VALIDATE_EXPIRATION_TIME");
		if(expirationTime){
			let times = new Date().getTime();
			let surplusTime = expirationTime - times

			if (surplusTime > 0) {
				this.time = this.$TOOL.number.divide(surplusTime , 1000, 0);
				this.disabled = true
				var t = setInterval(() => {
					this.time -= 1
					if (this.time < 1) {
						clearInterval(t)
						this.disabled = false
						this.time = 0
						this.$TOOL.cookie.remove("VALIDATE_EXPIRATION_TIME");
					}
				}, 1000);
			}else {
				this.$TOOL.cookie.remove("VALIDATE_EXPIRATION_TIME");
			}
		}

	},
	methods: {
		async getYzm() {
			var validate = await this.$refs.form.validateField("email").catch(() => {
			})
			if (!validate) {
				return false
			}

			let userLoginResult = await this.$API.auth.getEmailVerifyCode.post(this.form)
			if (userLoginResult.status != 200) {
				return false
			}

			this.$message.success("已发送验证消息至邮箱账户")
			this.disabled = true
			this.time = 60
			this.$TOOL.cookie.set("VALIDATE_EXPIRATION_TIME", new Date().getTime() + (1000 * this.time), {
				expires: this.time
			})
			var t = setInterval(() => {
				this.time -= 1
				if (this.time < 1) {
					clearInterval(t)
					this.disabled = false
					this.time = 0
					this.$TOOL.cookie.remove("TOKEN");
				}
			}, 1000)

		},
		async save() {
			var validate = await this.$refs.form.validate().catch(() => {
			})
			if (!validate) {
				return false
			}

			let userLoginResult = await this.$API.auth.resetPassword.post(this.form)
			if (userLoginResult.status != 200) {
				return false
			} else {
				this.stepActive = 1
			}
		},
		backLogin() {
			this.$router.push({
				path: '/login'
			})
		}
	}
}
</script>

<style scoped>


</style>
